<template>
  <div>
    <ul v-if="listData.length>0" class="list">
      <li v-for="(item, index) in listData" :key="index">
        <div class="title">
          <h5 v-html="item['title']" @click="toDetail(item)"></h5>
          <span class="status" :class="{'imp': item.status==='现行', 'abolish': item.status==='废止'}">{{item.status}}</span>
        </div>
        <p v-html="item['header']" class="cont"></p>
        <p class="other">
          <span v-show="item.tech_commitees&&item.tech_commitees!==''" :title="`归口单位：${item.tech_commitees}`">{{item.tech_commitees}}</span>
          <span v-show="item.draftsmanStr&&item.draftsmanStr!==''" :title="`起草人：${item.draftsmanStr}`">{{item.draftsmanStr}}</span>
          <span v-show="item.issue_date" :title="`发布日期：${item.issue_date}`">{{item.issue_date}}</span>
        </p>
      </li>
    </ul>
    <div v-else class="no-data">
      <loading1 :emptyText="emptyText"/>
    </div>
    <StandardDialog ref="standardDialog"/>
  </div>
</template>

<script>
import StandardDialog from '@/views/modules/IR/child/SearchResult/StandardDialog'
export default {
  props: {
    emptyText: {
      type: String
    }
  },
  components: {
    StandardDialog
  },
  data() {
    return {
      listData: [],
    }
  },
  methods: {
    init(result) {
      result.forEach(v => {
        if (v.header || v.scope) {
          let header = v.header || v.scope || ''
          if (header !== '') {
            let lastStr = header[header.length-1]
            let reg = /[.|。|？]/g
            if (!reg.test(lastStr)) {
              header += '...'
            }
          }
          v.header = header
        } else {
          v.header = '暂无内容'
        }
        if (v.draftsman && v.draftsman instanceof Array && v.draftsman.length > 0) {
          v.draftsmanStr = v.draftsman.join(' | ')
        }
      })

      this.listData = result
    },
    toDetail(item) {
      item.id = item.esId
      this.$refs.standardDialog.init(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  padding: 20px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 10px 0 20px;
  list-style: none;
  background-color: $color2;
  li {
    display: block;
    padding-bottom: 10px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e7e6ec;
    &:last-of-type {
      margin-bottom: 0;
    }
    .title {
      position: relative;
      display: flex;
      align-items: center;
      line-height: 48px;
      padding-left: 0;
      padding-right: 100px;
      border-bottom: 0;
      .classify {
        margin-right: 10px;
        font-size: 14px;
        background-image: linear-gradient(50deg, $color55, $color56);
        background-clip:text;
        color: transparent;
        i {
          display: inline-block;
          padding: 0 4px;
        }
      }
      h5 {
        max-width: calc(100% - 200px);
        margin-right: 10px;
        // font-family: SourceHanSansCN-Medium;
        font-weight: normal;
        font-size: 18px;
        color: $color57;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        ::v-deep {
          em {
            color: $color120;
          }
        }
      }
      .status {
        height: 16px;
        line-height: 16px;
        padding: 0 6px;
        border-radius: 6px;
        text-align: center;
        font-size: 12px;
        color: $color2;
        background-color: $mainColor;
        &.imp {
          background-color: $mainColor;
        }
        &.abolish {
          background-color: $color78;
        }
      }
    }
    .cont {
      display: -webkit-box;
      max-height: 96px;
      line-height: 24px;
      margin: 10px 0;
      font-size: 14px;
      color: $color58;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;//控制行数
      overflow: hidden;
      ::v-deep {
        em {
          color: $color120;
        }
      }
    }
    .other {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding-top: 4px;
      span {
        position: relative;
        display: inline-block;
        line-height: 24px;
        padding: 0 6px;
        margin-right: 10px;
        font-size: 12px;
        &:nth-of-type(1) {
          color: $color66;
          background-color: $color67;
        }
        &:nth-of-type(2) {
          color: $color62;
          background-color: $color63;
        }
        &:nth-of-type(3) {
          color: $color64;
          background-color: $color65;
        }
      }
    }
  }
}
.align-center {
  text-align: center;
}
.no-data {
  line-height: 1.5rem;
  padding: 10px 20px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 10px 0 20px;
  list-style: none;
  background-color: $color2;
}
</style>